@import "./common/common";

.search-bar{
    padding:rem(20) 0;
    background: #eee;
    overflow: hidden;
    .search-input{
        position: relative;
        width:rem(712);
        height:rem(68);
        border:1px solid #ccc;
        background: #fff;
        border-radius: rem(20);
        margin:0 auto;
        overflow: hidden;
        input[type='text']{
            width:100%;
            border:none;
            height:100%;
            text-indent: rem(55);
            color:#ccc;
            opacity: 0;
        }
    }
    .search-icon{
        position: absolute;
        left:0;
        top:0;
        text-align: center;
        width:100%;
        height: 100%;
        line-height: rem(68);
        color:#ccc;
        font-size:rem(36);
        &::after{  //伪类
            content:'搜索';
        }

    }
    .voice{
        position: absolute;
        right:0;
        top:0;
        height:rem(68);
        width:rem(68);
        z-index:10;
        line-height: rem(68);
        color:#ccc;
        text-align: center;
    }
}
#search:focus{
    opacity: 1;
    outline: none;
    &+.search-icon{
        width:rem(55);
        height:rem(68);
        &::after{
            content:'';
        }
        
    }
}



.chat-list{
    width:100%;
    overflow: hidden;
    background: #fff;
    padding-left:rem(20);
    border-bottom: 1px solid $borderColor;
    
    li{
        padding:rem(18) 0;
        border-top:1px solid $borderColor;
        overflow: hidden;
        a{
            display: block;
            position: relative;
            height:rem(100);
            padding:0 rem(140) 0 rem(120);
        }
        .user-img{
            position: absolute;
            left:0;
            width:rem(100);
            height:rem(100);
           
            img{
                width:100%;
                height:100%;
                border-radius: rem(8);
            }
            
        }
        .nick-name{
            line-height: rem(55);
            font-size:rem(30);
            color:#000;
            font-weight: bold;
        }
        .message{
            line-height: rem(40);
            color:#999;
            font-size:rem(26);
        }
        .date{
            position: absolute;
            right:rem(20);
            top:0;
            width:rem(120);
            font-size:rem(20);
            color:#999;
            line-height: rem(35);
        }
       
    }

}
.label{
    position: absolute;
    right:rem(-15);
    top:rem(-15);
    max-width: rem(30);
    height:rem(36);
    padding:0 rem(10);
    background: $labelColor;
    border-radius: rem(36);
    color:#fff;
    font-size:rem(20);
    text-align: center;
    line-height: rem(36);
    font-weight: bold;
    text-overflow: ellipsis;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
}